<template>
  <div class="props-table">
    <li class="prop-item" :class="{'no-text': !value.text , 'hide-item': value.isHidden}" :id="`item-${value.key}`"
      v-for="(value, key) in state.finalProps" :key="key">
      <span class="label" v-if="!value.hideLabel">{{ value.text }}</span>
      <div :class="`prop-component component-${value.component}`">
        <component v-if="!value.options" :is="value.component" v-bind="value.extraProps"
          :[value.valueProp]="value.value" v-on="value.events" />
        <component v-else :is="value?.component" v-model:[value.valueProp]="value.value" v-bind="value.extraProps"
          option-label-prop="text" :options="value.options" v-on="value.events">
          <template v-if="value.options && value.subComponent !=='a-select-option'">
            <component v-for="(option, index) in value.options" :is="value.subComponent" :key="index"
              :value="option.value">
              <render-vnode :vNode="option.text"></render-vnode>
            </component>
          </template>
          <template v-if="value.options && value.subComponent === 'a-select-option'"
            #option="{ value: val, text }">
            <span role="text" :aria-label="val"><render-vnode :vNode="text"></render-vnode></span>
          </template>


        </component>
      </div>
    </li>
  </div>
</template>


<script lang="ts" setup name="PropsTable">
import { type PropType, reactive, computed } from 'vue'
import { reduce } from 'lodash-es'
import { mapPropsToForms } from '@/constant/propMap'
import RenderVnode from './RenderVnode'
import {type AllComponentProps} from 'p-test-comp-es'
const props = defineProps({
  props: {
    //type: Object as PropType<AllComponentProps>,
    type: Object
  }
})
const emit = defineEmits(['change'])

let finalProps = computed(() =>
  reduce(
    props.props,
    (result, value, key) => {
      const newKey = key as keyof AllComponentProps
      const item = mapPropsToForms[newKey]
      if (item) {
        const { hideLabel,valueProp = 'value', initalTransform, eventName = 'change', afterTransform,parent } = item
        let isHidden = false
        if (parent) {
          isHidden = !(props.props as any)[parent]
        }
        const newItem = {
          ...item,
          value: initalTransform ? initalTransform(value) : value,
          valueProp,
          eventName,
          isHidden,
          hideLabel,
          key,
          events: {
            [eventName]: (e: any) => {
              emit('change', {
                key,
                value: afterTransform ? afterTransform(e) : e
              })
            }
          }
        }
        result[newKey] = newItem
      }
      return result
    },
    {} as { [key: string]: FormProps }
  )
)
const state = reactive({
  finalProps
})
</script>

<style lang="scss">
.prop-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.hide-item {
  display: none;
}
.label {
  width: 28%;
}
#item-fontWeight {
  margin-left: 28%;
}
.prop-item.no-text {
  display: inline-block;
  margin: 0 10px 0 0;
}
#item-fontWeight {
  margin-left: 28%;
}
.prop-component {
  width: 70%;
}
/* .component-a-slider {
  width: 80%;
} */
.component-a-select .ant-select {
  width: 150px;
}
.prop-component.component-shadow-picker, .prop-component.component-image-processer, .prop-component.component-background-processer {
  width: 100%;
}
#item-backgroundImage {
  width: 100%;
  cursor: pointer;
  margin-bottom: 15px;
}
#item-backgroundImage .styled-upload-component .uploader-container {
  min-height: 200px;
}

</style>
